<template>
  <div class="">
    <el-card>
      <div class="handel-top">
        <el-button
          type="primary"
          v-permission="['importUser']"
          @click="handelExcelImport"
          >{{ $t('message.excel.importExcel') }}</el-button
        >
        <el-button type="success" @click="handelExport">{{
          $t('message.excel.exportExcel')
        }}</el-button>
      </div>
    </el-card>
    <el-card class="tabar-container">
      <el-table :data="tableData">
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column
          prop="username"
          :label="$t('message.excel.name')"
        ></el-table-column>
        <el-table-column
          prop="mobile"
          :label="$t('message.excel.mobile')"
        ></el-table-column>
        <el-table-column :label="$t('message.excel.avatar')">
          <template #default="{ row }">
            <el-avatar :size="50" :src="row.avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="role" :label="$t('message.excel.role')">
          <template #default="{ row }">
            <template v-if="row.role && row.role.length > 0">
              <el-tag
                type="success"
                size="mini"
                v-for="item in row.role"
                :key="item.title"
                >{{ item.title }}</el-tag
              >
            </template>
            <el-tag v-else type="success" size="mini">{{
              $t('message.excel.defaultRole')
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="openTime" :label="$t('message.excel.openTime')">
          <template #default="{ row }">
            <span>{{ $filters.dateFormat(row.openTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" :label="$t('message.excel.action')">
          <template #default="{ row }">
            <el-button size="mini" type="primary" @click="hadleShow(row._id)">
              {{ $t('message.excel.show') }}
            </el-button>
            <el-button
              size="mini"
              v-permission="['distributeRole']"
              type="info"
              @click="showRole(row)"
            >
              {{ $t('message.excel.showRole') }}
            </el-button>
            <el-button
              v-permission="['removeUser']"
              size="mini"
              type="danger"
              @click="hadleDel(row)"
            >
              {{ $t('message.excel.remove') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="size"
          :page-sizes="[2, 10, 20, 50]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <Export2Excel v-model:show="isShowExport"></Export2Excel>
    <RoleModal
      v-model="showRoleDialog"
      :roleId="roleId"
      @updated="getTableData"
    ></RoleModal>
  </div>
</template>

<script setup>
import { ref, onActivated } from 'vue'
import { useRouter } from 'vue-router'
import { getManageList, delUserManage } from '@/api/user-manage'
import { watchLangChange } from '@/utils/i18n'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
import Export2Excel from './components/Export2Excel.vue'
import RoleModal from './components/RoleModal'
const tableData = ref([])
const page = ref(1)
const size = ref(2)
const total = ref(0)
const getTableData = async () => {
  const resp = await getManageList({
    page: page.value,
    size: size.value
  })
  tableData.value = resp.list
  total.value = resp.total
}
getTableData()
watchLangChange(getTableData)
const handleSizeChange = (cahngeSize) => {
  size.value = cahngeSize
  getTableData()
}
const handleCurrentChange = (current) => {
  page.value = current
  getTableData()
}
const router = useRouter()
const handelExcelImport = () => {
  router.push('/user/import')
}
onActivated(getTableData)
// 删除
const i18n = useI18n()
const hadleDel = (row) => {
  ElMessageBox.confirm(
    i18n.t('message.excel.dialogTitle1') +
      row.username +
      i18n.t('message.excel.dialogTitle2'),
    '提示',
    {
      type: 'warning'
    }
  ).then(async () => {
    await delUserManage(row._id)
    ElMessage.success(i18n.t('message.excel.removeSuccess'))
    getTableData()
    // 确认删除
  })
}
const isShowExport = ref(false)
const handelExport = () => {
  isShowExport.value = true
}
// 查看详情
const hadleShow = (id) => {
  router.push(`/user/info/${id}`)
}
// 角色处理
const roleId = ref('')
const showRoleDialog = ref(false)
const showRole = (item) => {
  roleId.value = item._id
  showRoleDialog.value = true
}
</script>

<style lang="scss" scoped>
.tabar-container {
  margin: 20px 0;
}
.handel-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.pagination-container {
  padding-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
